<template>
  <!-- 播放页面 -->

  <div class="player">
    <!-- 头部 标题 收缩  -->
    <div style="line-height: 2rem; display: flex; padding: 3vw">
      <!-- 左边下缩 -->
      <span @click="closeWindow()">
        <svg viewBox="0 -40 100 200" style="height: 5rem">
          <line
            x1="20"
            y1="30"
            x2="50"
            y2="60"
            style="stroke: white; stroke-width: 3"
          ></line>
          <line
            x1="50"
            y1="60"
            x2="80"
            y2="30"
            style="stroke: white; stroke-width: 3"
          ></line>
        </svg>
      </span>
      <!-- 标题 -->
      <div style="flex-grow: 1; color: white; padding: 1rem">
        <div style="font-size: 1.3rem">{{ title }}</div>
        <div
          style="
            font-size: 0.8rem;
            color: lightgray;
            display: flex;
            justify-content: center;
          "
        >
          {{ singer }}

          <div style="display: inline-flex">
            <svg
              t="1667743640809"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              p-id="1478"
              fill="white"
              width="1rem"
            >
              <path
                d="M394 754.14a81.71 81.71 0 0 1-81.62-81.61V424.92c-85.55-5.13-153.6-76.38-153.6-163.2 0-90.15 73.35-163.49 163.5-163.49s163.49 73.34 163.49 163.49c0 16.77-2.7 42.75-10.14 63.83v347A81.71 81.71 0 0 1 394 754.14z m-29-385.83v304.22a29 29 0 0 0 58 0V315.58l2-4.78c4.67-11.42 8.19-32.52 8.19-49.08a110.87 110.87 0 1 0-110.95 110.87 113.05 113.05 0 0 0 13.32-0.8z"
                p-id="1481"
              ></path>
              <path
                d="M238.42 393.63a26.32 26.32 0 1 1 0-52.63c20.31 0 43-33.91 43-79.28s-22.72-79.28-43-79.28a26.31 26.31 0 1 1 0-52.62c53.64 0 95.65 57.93 95.65 131.9s-42.01 131.91-95.65 131.91zM628.7 820.82a81.71 81.71 0 0 1-81.62-81.62v-347c-7.44-21.08-10.14-47.06-10.14-63.83 0-90.15 73.34-163.49 163.49-163.49s163.49 73.37 163.49 163.52c0 86.82-68 158.06-153.6 163.19V739.2a81.71 81.71 0 0 1-81.62 81.62z m71.73-603.28A111 111 0 0 0 589.57 328.4c0 16.56 3.52 37.66 8.18 49.08l2 4.78V739.2a29 29 0 0 0 58 0V435l29.41 3.48a113.82 113.82 0 0 0 13.33 0.79 110.86 110.86 0 0 0 0-221.72z"
                p-id="1482"
              ></path>
              <path
                d="M784.25 460.31c-53.64 0-95.66-57.95-95.66-131.91s42-131.92 95.66-131.92a26.32 26.32 0 0 1 0 52.63c-20.31 0-43 33.91-43 79.29s22.72 79.28 43 79.28a26.32 26.32 0 0 1 0 52.63zM394 861.65a26.31 26.31 0 0 1-26.31-26.31V727.83a26.32 26.32 0 1 1 52.63 0v107.51A26.31 26.31 0 0 1 394 861.65zM627.14 928.33A26.31 26.31 0 0 1 600.83 902V794.51a26.31 26.31 0 1 1 52.62 0V902a26.31 26.31 0 0 1-26.31 26.33z"
                p-id="1483"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <!-- 右边分享 -->
      <div>
        <svg viewBox="0 -40 100 200" style="height: 4rem; margin-top: 2vw">
          <circle cx="20" cy="45" r="10" stroke="white" stroke-width="3" fill="none" />
          <line
            x1="60"
            y1="20"
            x2="30"
            y2="35"
            style="stroke: white; stroke-width: 3"
          ></line>
          <circle cx="72" cy="15" r="10" stroke="white" stroke-width="2" fill="none" />
          <line
            x1="30"
            y1="55"
            x2="60"
            y2="70"
            style="stroke: white; stroke-width: 3"
          ></line>
          <circle cx="72" cy="75" r="10" stroke="white" stroke-width="2" fill="none" />
        </svg>
      </div>
    </div>

    <!-- 背景 -->
    <div class="background">
      <img :style="{ 'background-image': 'url(' + img + ')' }" />
    </div>

    <!-- 歌词 -->
    <div style="position: fixed" class="PlayLyricsPageList">
      <!-- 水平线 -->

      <div
        ref="horizontalLine"
        style="width: 100vw; margin-top: 60vw; position: absolute"
        v-show="mouseSta && !imgShow"
      >
        <span> </span>
        <hr style="width: 80vw; border-bottom: 0.1px solid #ded9d9" />
      </div>

      <div
        :class="{ PlayLyricsHidePage: !imgShow }"
        style="position: absolute; width: 100vw; display: flex; justify-content: center"
      >
        <!-- 旋转 -->
        <div id="musicImage" :class="{ animationPlayState: !playBackStatus }">
          <div @click="toggleShopShow">
            <img :src="img" class="song-img" ref="imgRoate" />
          </div>
        </div>
      </div>
      <div
        class="lyric"
        :class="{ PlayLyricsHidePage: !lyricShow }"
        @click="toggleShopShow"
        style="position: absolute; width: 100vw"
      >
        <ul
          ref="lyricUL"
          class="lyricUL"
          style="overflow: auto"
          @touchend="event_touchChange(false)"
          @touchstart="event_touchChange(true)"
        >
          <li v-for="(item, index) in 7" :key="index">&nbsp;</li>
          <li
            v-for="(item, i) in lyricsObjArr"
            :class="{ lyric_playing: lyricIndex === i }"
            :key="item.uid"
            :data-index="i"
            ref="lyric"
          >
            <template v-if="item.length > 0">
              {{ item }}
            </template>
            <template v-else> &nbsp; </template>
          </li>

          <li v-for="(item, index) in 5" :key="index + 10">&nbsp;</li>
        </ul>
      </div>
    </div>

    <!-- 动作按钮 -->

    <!-- 进度条 -->
    <div class="progressBar">
      <span>{{ formatTime(nowTime) }}</span>
      <div class="progress">
        <Slider v-model="nowTime" :max="allTime" @change="onChange" />
      </div>
      <span>{{ formatTime(allTime) }}</span>
    </div>
    <!-- 播放按钮 -->
    <div class="BottomBtu">
      <div>
        <svg
          t="1668387705779"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          p-id="4098"
          width="35"
          height="35"
        >
          <path
            d="M667.786667 117.333333C832.864 
            117.333333 938.666667 249.706667 938.666667 
            427.861333c0 138.250667-125.098667 290.506667-371.573334 
            461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 
            566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 
            356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 
            608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 
            15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 
            15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 
            180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 
            493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 
            874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
            p-id="4099"
            fill="#ffffff"
          ></path>
        </svg>
      </div>

      <div @click="$store.dispatch('serviceSetPlayAction', 'prev')">
        <svg viewBox="0 0 104 104" style="height: 5rem">
          <line
            x1="50"
            y1="30"
            x2="30"
            y2="50"
            style="stroke: white; stroke-width: 3"
          ></line>
          <line
            x1="30"
            y1="50"
            x2="50"
            y2="70"
            style="stroke: white; stroke-width: 3"
          ></line>
        </svg>
      </div>
      <div class="playBtu" @click="playMusic()">
        <svg viewBox="0 0 104 104" style="height: 4rem">
          <path
            style="fill: none; stroke: #d4d4d4; stroke-width: 4px"
            d="M 52 52 m 0 -50 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100"
          ></path>
          <line
            x1="42"
            y1="35"
            x2="42"
            y2="60"
            style="stroke: white; stroke-width: 7"
            v-if="playBackStatus"
          />
          <line
            v-if="playBackStatus"
            x1="58"
            y1="35"
            x2="58"
            y2="60"
            style="stroke: white; stroke-width: 7"
          />
          <polygon
            v-if="!playBackStatus"
            points="40,35 70,50 40,65"
            style="fill: white; stroken: white; stroken-width: 1"
          />
        </svg>
      </div>

      <div @click="$store.dispatch('serviceSetPlayAction', 'next')">
        <svg viewBox="0 0 104 104" style="height: 5rem">
          <line
            x1="50"
            y1="30"
            x2="70"
            y2="50"
            style="stroke: white; stroke-width: 3"
          ></line>
          <line
            x1="70"
            y1="50"
            x2="50"
            y2="70"
            style="stroke: white; stroke-width: 3"
          ></line>
        </svg>
      </div>

      <!--评论 -->
      <div class="comment" @click="comment()">
        <svg
          t="1668387093699"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          p-id="2705"
          width="43"
          height="43"
        >
          <path
            d="M512 799.44c-24.12586667
            0-48.2816-2.19413333-71.33546667-6.58453333l-167.84 102.048v-168.96c-87.7888-61.45386667-143.712-155.792-143.712-261.12106667 0-185.41226667 
            171.1232-335.72693333 382.8864-335.72693333 211.73013333 0 382.88533333 150.31466667 
            382.88533334 335.72693333S723.72906667 799.44 512 799.44z m0-622.0608c-185.42826667
            0-335.7408 128.36693333-335.7408 287.44426667 0 97.6384 57.06133333 183.21493333 
            142.64 234.78186666V811.52l113.01973333-68.02133333c26.30186667 5.48053333 
            52.64213333 8.7616 81.18506667 8.7616 185.39946667 0 335.712-128.36693333
            335.712-287.43786667C847.7056 305.74506667 697.39413333 177.3792 512 177.3792z 
            m167.8368 263.30026667H344.12906667c-13.16693333 0-24.12693333-10.976-24.12693334-24.12693334
            0-13.16693333 10.95893333-24.13866667 24.128-24.13866666h335.70666667c13.20213333 
            0 24.16106667 10.9728 24.16106667 24.13866666-0.00106667 13.152-10.96 24.128-24.16 24.128z m-287.42613333
            95.44533333h239.17546666c13.168 0 24.12586667 10.98986667 24.12586667 24.14186667 0 13.16906667-10.9568 
            24.1408-24.12586667 24.1408H392.41066667c-13.1648 0-24.1248-10.97173333-24.1248-24.1408 
            0-13.152 10.96106667-24.14293333 24.1248-24.14293334z m0 0"
            p-id="2706"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
    </div>
    <!-- 加载图片 -->
    <img style="display: none" :src="imgUrl" ref="imgTmp" @load="runImgLoadToUI" />
    <Popup v-model="commentShow" position="bottom" :style="{ height: '100%' }">
      <CommentPage
        v-if="commentShow"
        :tle="title"
        :headImgUrl="imgUrl"
        :id="$store.state.playerState.playData.songId"
        :singer="$store.state.playerState.playData.music_singer"
        @hook:destroyed="commentShow = false"
      />
    </Popup>
  </div>
</template>
<script>
import { Slider } from "vant";
import { Popup } from "vant";
import CommentPage from "@/components/zx/CommentPage.vue";
export default {
  components: {
    Slider,
    Popup,
    CommentPage,
  },
  data() {
    return {
      //
      imgUrl: "http://img.daimg.com/uploads/allimg/210114/1-210114151951.jpg",
      img:
        "",
      title: "",
      singer: "",
      songs: [],
      songUrl: "",

      lyric: "",
      lyricsObjArr: [],
      lyricIndex: 2,

      imgShow: true, //默认内容不显示
      lyricShow: false,

      // 进度条
      nowTime: 0,
      allTime: 1,
      // 进度条拖动
      progressState: false,

      // 底部按钮
      playBackStatus: false,
      // 歌词拖动
      mouseSta: false,
      mouseStaRight: false,

      //评论页面
      commentShow: false,
    };
  },
  created() {
    // this.getData();
    window.that = this;
  },
  mounted() {
    console.log(this.lyricsObjArr);

    // this.lyricsObjArr = this.$store.state.playerState.playData.lrc_list;
    this.event_playLrc(this.$store.state.playerState.playData.lrc_now_line_number);
    this.event_playBackStatus(this.$store.state.playerState.playBackStatus);
    this.$refs.lyricUL.addEventListener("scroll", this.event_handleScroll);
    // let that = this;

    // this.playBackStatus = this.$store.state.playerState.playBackStatus;
    this.allTime = this.$store.state.playerState.playData.music_duration_time;
    this.nowTime = this.$store.state.playerState.playData.music_now_play_time;
    // this.name =
    this.event_playSongTitle(this.$store.state.playerState.playData.music_title);

    this.event_playSongSinger(this.$store.state.playerState.playData.music_singer);
    let dot = document.querySelector("div.progressBar > div > div > div > div > div");
    let that = this;
    dot.ontouchstart = function () {
      that.event_touchProgressChange(true);
    };
    dot.ontouchend = function () {
      that.event_touchProgressChange(false);
    };
  },
  methods: {
    event_touchChange(val) {
      this.mouseStaRight = val;
      if (val == true) {
        setTimeout(() => {
          if (this.mouseStaRight) this.mouseSta = val;
        }, 200);
      } else {
        if (this.mouseSta) {
          this.mouseSta = false;
          if (this.imgShow) {
            return;
          }
          //  if (!val) {
          this.event_HandleTouchUp();
          // }
        }
      }

      // console.log("123456", val);
    },
    // 格式化歌词进度时间
    formatTime(val) {
      // console.log(parseInt(val / 60), val % 60);
      let m = parseInt(val / 60);
      let s = parseInt(val % 60);
      if (isNaN(m)) {
        m = "00";
      }
      if (isNaN(s)) {
        s = "00";
      }
      let minute =
        ("0" + m.toString()).substr(-2) + ":" + ("0" + s.toString()).substr(-2);

      return minute;
    },

    // 图片加载
    runImgLoadToUI() {
      this.img = this.imgUrl;
    },

    // 事件
    event_playBackStatus(val) {
      // console.log(val);
      // console.log(this.$store.state.playerState.playData.lrc_list);
      this.lyricsObjArr = this.$store.state.playerState.playData.lrc_list;
      this.playBackStatus = val;
    },
    event_playLrc(val) {
      this.lyricIndex = val;
      this.lyricsObjArr = this.$store.state.playerState.playData.lrc_list;
      let a = this.$refs.lyricUL.childNodes[0].clientHeight;
      let b = this.$refs.lyricUL.childNodes[1].clientHeight;
      if (a > b) {
        a = b;
      }
      a = a + 3;
      if (val && !this.mouseSta) {
        this.$refs.lyricUL.scrollTop = a * val;
      }
      this.event_handleScroll();
    },
    // 滚动事件
    event_handleScroll() {
      let array = this.$refs.lyricUL.childNodes;
      let height = this.$refs.lyricUL.clientHeight;
      for (let index = 0; index < array.length; index++) {
        let b = array[index];
        let domTop = b.offsetTop - b.parentElement.scrollTop;
        // if (index == 7) {
        //   // console.log(domTop);
        //   // this.$store.dispatch("serviceSetPlayProgress", { type: 1, val: 15 });
        // }
        if (domTop < 20) {
          b.style = "opacity: 0;"; //"color:red";
        } else if (domTop < height - 20) {
          b.style = "";
        } else {
          b.style = "opacity: 0;";
        }
      }
    },
    event_HandleTouchUp() {
      if (this.lyricsObjArr == null || this.lyricsObjArr.length == 0) {
        return;
      }
      let array = this.$refs.lyricUL.childNodes;
      let height = this.$refs.lyricUL.clientHeight;

      let arr = [];
      let objArr = [];
      for (let index = 0; index < array.length; index++) {
        let b = array[index];
        let domTop = b.offsetTop - b.parentElement.scrollTop;
        // if (index == 7) {
        //   // console.log(domTop);
        //   // this.$store.dispatch("serviceSetPlayProgress", { type: 1, val: 15 });
        // }
        if (domTop < 20) {
          // b.style = "opacity: 0;"; //"color:red";
        } else if (domTop < height - 20) {
          arr.push(domTop + this.$refs.lyricUL.parentElement.offsetTop);
          objArr.push(b);
        }
      }
      let pos = 0;
      let min = 100;
      let horTop = this.$refs.horizontalLine.offsetTop;
      for (let i = 1; i < arr.length; i++) {
        let temp = parseInt(Math.abs(horTop - arr[i]));
        // console.log(Math.abs(horTop - arr[i]));
        if (min > temp) {
          // console.log("满足条件", i);
          min = temp;
          pos = i;
        }
      }
      this.$store.dispatch("serviceSetPlayProgress", {
        type: 1,
        val: objArr[pos].getAttribute("data-index"),
      });
      // console.log(pos);
      // console.log(arr);
      // console.log(objArr[pos].getAttribute("data-index"));
    },

    event_playAllTime(val) {
      this.allTime = val;
      // this.allTime = this.$store.state.playerState.playData.music_duration_time;
    },

    event_playNowTime(val) {
      // this.value = val;
      if (this.progressState) {
        return;
      }
      this.nowTime = val; //this.$store.state.playerState.playData.music_now_play_time;
    },
    // 监听歌曲名称
    event_playSongTitle(val) {
      this.title = val;
      let t = this.$store.state.DataCacheMap.simpleData[
        this.$store.state.playerState.playData.songId
      ];
      if (t && t["headUrl"]) {
        t = t["headUrl"];
        this.imgUrl = t;
      }
    },
    //监听歌手
    event_playSongSinger(val) {
      this.singer = val;
    },

    // 进度条拖动
    event_touchProgressChange(val) {
      this.progressState = val;

      // console.log(val, "拖动");
    },
    // 点击切换事件
    toggleShopShow() {
      this.event_playLrc(this.$store.state.playerState.playData.lrc_now_line_number);
      this.imgShow = !this.imgShow; //使false变为true显示
      this.lyricShow = !this.lyricShow;
    },
    // 进度条
    onChange(value) {
      // console.log("当前值：" + value);
      this.$store.dispatch("serviceSetPlayProgress", { type: 0, val: value });
    },
    // 播放音乐
    playMusic() {
      // console.log("play", !this.playBackStatus);
      this.$store.dispatch("serviceSetPlayerState", { val: !this.playBackStatus });
    },
    closeWindow() {
      console.log("关闭歌词窗口");
      this.$parent.closeWindow();
    },
    comment() {
      // console.log(this.$store.state.playerState.playData.songId);
      // let id = this.$store.state.playerState.playData.songId;
      // router
      // this.$router.push({ path: `/commentPage` });
      this.commentShow = true;
    },
  },

  // 监听
  computed: {
    servicePlayBackStatus() {
      return this.$store.state.playerState.playBackStatus; //需要监听的数据
    },
    servicePlayLyrcsLine() {
      return this.$store.state.playerState.playData.lrc_now_line_number; //需要监听的数据
    },
    servicePlayNowTime() {
      return this.$store.state.playerState.playData.music_now_play_time;
    },
    servicePlayAllTime() {
      return this.$store.state.playerState.playData.music_duration_time;
    },
    servicePlaySongTitle() {
      return this.$store.state.playerState.playData.music_title;
    },
    servicePlaySongSinger() {
      return this.$store.state.playerState.playData.music_singer;
    },
  },
  watch: {
    servicePlayBackStatus(newVal) {
      // console.log("数据发生变化啦", "开始播放啦"); //修改数据时，看不到该输出结果，因为无法监听到数据的变化
      // console.log(newVal, oldVal);
      this.event_playBackStatus(newVal);
    },
    servicePlayLyrcsLine(newVal) {
      // this.
      // console.log("数据发生变化啦");
      // console.log(newVal, oldVal);
      this.event_playLrc(newVal);
    },

    servicePlayNowTime(val) {
      this.event_playNowTime(val);
    },
    servicePlayAllTime(val) {
      this.event_playAllTime(val);
    },

    servicePlaySongTitle(val) {
      this.event_playSongTitle(val);
    },

    servicePlaySongSinger(val) {
      this.event_playSongSinger(val);
    },

    // 使用watch监听当前歌曲进度value的变化处理歌词位置
  },
};
</script>

<style scoped>
/* 背景 */
.background > img {
  background-blend-mode: multiply;
  background-color: rgb(191 182 182);
  background-repeat: no-repeat;
  background-size: cover;
}
/* 标题 */
h2 {
  color: #ffffff;
}
.background > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(30px);
}

.player {
  overflow: hidden;
  scroll: ;
  /* height: 52rem; */
  /* background: linear-gradient(to bottom left, #73b5afe3, #3a4042c9); */
}

/* 歌词 */
.lyric {
  height: 20rem;
  margin-top: 5rem;
  overflow: hidden;
}
.lyricUL > li {
  transition: all 0.6s;
  color: white;
}

.lyric > ul {
  height: 20rem;
  color: red;
}
.lyricUL > li.lyric_playing {
  color: skyblue;
  font-size: 1.5rem;
}
.lyricUL > li:not(.lyric_playing) {
  color: #ded9d9;
  font-size: 1.2rem;
}

.control {
  margin-top: 3rem;
}

.van-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 30px;
}

element.style {
  background: player;
}

/* 封面 */
#musicImage {
  margin: 0 auto;
  margin-top: 10rem;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  transform: rotate(45deg);
  background-image: radial-gradient(3.5em 30em ellipse, #fff, #000);
  border: 2px solid #131313;
  box-shadow: 0 0 0 10px #343935;
  opacity: 0.7;
  animation: play 10s linear infinite;
}
/* 旋转 */
#musicImage.animationPlayState {
  animation-play-state: paused;
}

@keyframes play {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.song-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 12rem;
  height: 12rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #000;
  border-radius: 200px;
  animation: animations1 10s linear infinite forwards;
}

.van-progress__portion {
  position: absolute;
  left: 0;
  width: 80%;
  height: 100%;
  background: #fff;
  border-radius: inherit;
}
.progressBar {
  width: 100vw;
  position: absolute;
  bottom: 10rem;
  display: flex;
  margin: auto;

  align-items: center;
}
.progressBar > span {
  color: #ded9d9;
}

.progress {
  width: 70vw;
  margin: 0 auto;
}

.PlayLyricsHidePage {
  opacity: 0;
}
.PlayLyricsPageList > div {
  transition: all 0.3s;
}

.BottomBtu {
  width: 95vw;
  position: absolute;
  bottom: 2.5rem;
  display: flex;
  margin: auto 0.8rem;
  align-items: center;
  justify-content: space-evenly;
}
/* 动作按钮 */
.action {
  width: 100vw;
  position: absolute;
  bottom: 12rem;
  display: flex;
  margin: auto 0.5rem;
  align-items: center;
  justify-content: space-around;
}
</style>

<style>
/* 滑动条 */

.van-slider__button {
  width: 10px;
  height: 10px;
}
</style>
